<template>
  <div class="home">
    <!-- <el-row>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<div>
  <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>&ensp;
  <el-link type="primary">主要链接</el-link>&ensp;
  <el-link type="success">成功链接</el-link>&ensp;
  <el-link type="warning">警告链接</el-link>&ensp;
  <el-link type="danger">危险链接</el-link>&ensp;
  <el-link type="info">信息链接</el-link>&ensp;
</div>
<h1> {{ $store.state.num }}</h1><button @click="jia">+</button>
<h1>666{{ num }}</h1>
<h1>{{ num1 }}</h1> -->
<SubView></SubView>
{{ num }}
<AddView></AddView>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import AddView from "./AddView.vue";
import SubView from "./SubView.vue";
export default {
  data() {
    return {};
  },
  mounted() {},
  computed: {
    // ...mapState({num:"num"}),
    ...mapState(["num"]),
    ...mapGetters(["num1"]),
  },
  methods: {
    jia() {
      this.$store.dispatch("jia", 10);
    },
  },
  components: {
    AddView,
    SubView,
  },
};
</script>
<style lang='less' scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>